require(["config"],function(){
	require(["jquery","header","nav","fixeds"],function($,header,nav,fixed){
		
		
		//请求服务器数据,生成网页内容
		$.ajax({
			url:"data_json/data_index.json",
			type:"get",
			dataType:"json",
			success: function(res){
				//加载common.html中通用型网页元素
				$("#header").load("htmls/common.html .header",function(){
					header.init(res);
				});
				$("#nav").load("htmls/common.html .nav",function(){
					nav.init(res);
				});
				$("#footer").load("htmls/common.html .footer");
				
				$("#stairRight").load("htmls/common.html #stairRight>li",function(){
					commonEventBind();
				});
//				console.log(res);
				//给页面元素绑定事件
				
			}
		});
		
		var currentIndex = 0;
		var length = 5;
		var data = {};
		
		//请求数据完成非common部分
		$.ajax({
			type:"get",
			url:"data_json/data_details.json",
			async:true,
			success:function(res){
				console.log(res);
				data = res;
				init(res);
				eventBind();
			}
		});
		
		
		//根据数据初始化详情页函数
		
		function init(res){
			$(".page_title").html(`<a href="index.html">首页</a>>商品详情>${res.title}`);
			
			$(".mainShow").attr("src",res.imgs.big[0]);
			var ul = $(".left_select_container");
			var html = "";
			for(var i=0; i<res.imgs.small.length; i++){
				if(i == 0){
					html+=`<li class="left_select_item checked">
						<a href="javascript:;"><img src="${res.imgs.small[i]}" alt=""/></a href="javascript:;">
					</li>`
				}else{
					html+=`<li class="left_select_item">
						<a href="javascript:;"><img src="${res.imgs.small[i]}" alt=""/></a href="javascript:;">
					</li>`
				}
				
			}
			ul.html(html);
			
			$(".mainTitle").text(res.title);
			$(".subTitle").text(res.subTitle);
			
			$(".promotions").html(
				`<h5 class="prom_title">${res.sales.title}</h5>
				<div class="prom_con_container">
					<p prom_con>${res.sales.info[0]}</p>
					<p prom_con><a href="javascript:;">${res.sales.info[1]}</a></p>
				</div>`
			)
				
			$(".gift").html(
				`<h5 class="gift_title">${res.gift.title1}<span>${res.gift.title2}</span></h5>
				<p class="gift_con">
					<a href="javascript:;">
						<img src="${res.gift.src}" alt="" />
					</a>
					<a href="javascript" class="info">${res.gift.intro}</a>
				</p>`
			)
					
			var html1 = ""
			console.log(res.select.options);
			for(var j=0;j<res.select.options.length;j++){
				if(j == 0){
					html1 +=`<li class="item selected"><a href="javascript:;">${ res.select.options[j] }</a></li>`;	
				}else{
					html1 +=`<li class="item"><a href="javascript:;">${ res.select.options[j] }</a></li>`;
				}
			}
			
			$(".item_container").html(html1);
			
						
		}
		
		
		
		
		
		
		
		//main_left 元素时间绑定
		function eventBind(){
			var left = $(".btn_left");
			var right = $(".btn_right");
			var items = $(".left_select_item");
			left.on("click",function(){
				indexChange("l");
				items.eq(currentIndex).addClass("checked").siblings().removeClass("checked");
				
				if(currentIndex == 0){
					left.addClass("btnNone");
				}
				if(currentIndex != length){
					right.removeClass("btnNone");
				}
				if(parseInt($(".left_select_container").css("left"))<0 && currentIndex<5){
					$(".left_select_container").animate({
						left:0
					},1000)
				}
			});
			right.on("click",function(){
				indexChange("r");
				items.eq(currentIndex).addClass("checked").siblings().removeClass("checked");
				if(currentIndex == length){
					right.addClass("btnNone");
				}
				if(currentIndex != 0){
					left.removeClass("btnNone");
				}
				console.log(currentIndex);
				if((currentIndex)%5==0){
					$(".left_select_container").animate({
						left:-480
					},1000)
				}
			});
			items.on("click",function(){
				currentIndex = $(this).index(".left_select_item");
				items.eq(currentIndex).addClass("checked").siblings().removeClass("checked");
				$(".mainShow").attr("src",data.imgs.big[currentIndex]);
				
			})
		}
		
		//index变化函数
		function indexChange(type){
			if(type == "l"){
				if(currentIndex > 0){
					currentIndex --;
				}else{
					currentIndex = 0;
				}
			}else if(type == "r"){
				if(currentIndex < length){
					currentIndex ++;
				}else{
					currentIndex = length;
				}
			}
			$(".mainShow").attr("src",data.imgs.big[currentIndex]);
		}

		
		//通用型元素事件绑定
		function commonEventBind(){
			
			//鼠标滚轮滑动事件
			$(document).on("scroll",function(){
				var scrollTop = $(document).scrollTop();
				//当滚轮滑动距离大于200时,右侧固定悬浮显示
				if(scrollTop > 200){
					$("#stairRight").show();
				}else{
					$("#stairRight").hide();
				}
			});
			
			
			//右侧悬浮滑入滑出事件
			$("#stairRight").children().on("mouseover",function(){
				$(this).find("ul").show().stop().animate({
					left:-$(this).find("ul").width()-5+"px",
					opacity:1
				},500);//这里需要一个右移动画
			}).on("mouseout",function(){
				$(this).find("ul").stop().animate({
					left:"-260px",
					opacity:0
				},500,function(){
					$(this).find("ul").hide();
				}.bind(this));
			});
			
			//右侧悬浮最后一个按钮点击事件处理
			$("#stairRight>li:last").on("click",function(){
				$("body").animate({scrollTop:0},1000);
			})
			
			
			
			
		}
		
		
		
		
		
		
		
		
		
		
	});
	
	
})
